<template>
     <div class="search">
        输入搜索
        <el-input
        placeholder="输入教师姓名"
        v-model="keyword"
        clearable>
        </el-input>
        上次教学时间 
        <el-date-picker
        v-model="value2"
        type="daterange"
        align="right"
        unlink-panels
        range-separator="-"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        :picker-options="pickerOptions">
        </el-date-picker>
        <el-button type="primary" @click="searchHander">查询</el-button>
        <el-button>重置</el-button>       
     </div>
</template>

<script>
  export default {
    data() {
      return {
        keyword: '',
         pickerOptions: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }]
        },
        value1: '',
        value2: ''
      };
      },
      methods:{
        batchhander(){
            eventBus.$emit('batchtranfer')
        },
        searchHander(){
            this.$emit('parentsearch',this.keyword)
        },
      }
    }
</script>

<style lang="less">
.search{
    height: 64px;
    background-color: white;
    padding-left: 30px;
    font-weight: bold;
    display: flex;
    align-items: center;
    .el-input{
        width: 250px;        
        margin-left: 8px;
        margin-right: 30px;
    }
    .el-date-editor{
        margin-left: 8px;
        margin-right: 30px;
    }
    .el-button+.el-button{
        margin-left: 30px;
    }
    .el-button{
        font-weight: bold;
    }

}

</style>